<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风向分布</title>
    <script src="../echarts.min.js"></script>
    <script src="../lodash.min.js"></script>
    <style>
        .flex{
            display: flex;
        }
    </style>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="mainl" style="width: 100%; height: 500px"></div>
    <div id="mainr" style="width: 100%; height: 500px"></div>
    

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('mainl'));
        
        // 指定图表的配置项和数据
        option = {
            title: {
                text: '基础雷达图'
            },
            // tooltip: {},
            // legend: {
            //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
            // },
            radar: {
                shape: 'circle',
                // indicator: [
                indicator: (function (){
                    let res = [];
                    for (var i = 0; i < 12; i++) {
                        res.push({text: 360 / 12 * i,max:360});
                    }
                    return res;
                })(),
                //     { name: '销售（sales）', max: 6500},
                //     { name: '管理（Administration）', max: 16000},
                //     { name: '信息技术（Information Techology）', max: 30000},
                //     { name: '客服（Customer Support）', max: 38000},
                //     { name: '研发（Development）', max: 52000},
                //     { name: '市场（Marketing）', max: 25000}
                // ]
            },
            series: [{
                symbol: 'arrow',
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                areaStyle: {
                    // normal: {},
                    // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                    // color: {
                    //     type: 'linear',
                    //     x: 0,
                    //     y: 0,
                    //     x2: 0,
                    //     y2: 1,
                    //     colorStops: [{
                    //         offset: 0, color: 'red' // 0% 处的颜色
                    //     }, {
                    //         offset: 1, color: 'blue' // 100% 处的颜色
                    //     }],
                    //     globalCoord: false // 缺省为 false
                    // }
                    // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0, color: 'red' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                    // 纹理填充
                    // color: {
                    //     image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                    //     repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
                    // }
                },
                data : [
                    {
                        value : [4300, 10000, 28000, 35000, 50000, 19000],
                        name : '预算分配（Allocated Budget）'
                    },
                    {
                        value : [5000, 14000, 28000, 31000, 42000, 21000],
                        name : '实际开销（Actual Spending）'
                    }
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>
</body>
</html>